<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bms</title>
<link rel="stylesheet" type="text/css" href="/themes/default/easyui.css" id="swicth-style">
<link rel="stylesheet" type="text/css" href="/css/icon.css">
<link rel="stylesheet" type="text/css" href="/css/common.css">
<link rel="stylesheet" type="text/css" href="/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/themes/color.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
</head>

<body class="easyui-layout" style="padding:5px;">

<table id="tg"></table>

<div id="addOrEdit" class="easyui-window" title="添加菜单" data-options="closed:true,iconCls:'icon-save',footer:'#ft'" style="width:450px;height:300px;padding:10px;">
    <form id="ff" method="post">
        <table class="table-blue">
            <tr>
                <th>父级菜单：</th>
                <td><input type="hidden" name="id"/><input class="easyui-combotree" id="ct" value="0" name="pid" data-options="required:true" style="width:80%"/></td>
            </tr>
            <tr>
                <th>菜单名称：</th>
                <td><input class="easyui-validatebox textbox" type="text" name="name" data-options="required:true, validType:'maxLength[50]'"/></td>
            </tr>
            <tr>
                <th>菜单地址：</th>
                <td><input class="easyui-validatebox textbox" type="text" name="url" data-options="required:true, validType:'maxLength[100]'"/></td>
            </tr>
            <tr>
                <th>菜单图标：</th>
                <td><input class="easyui-validatebox textbox" type="text" name="icon" data-options="validType:'maxLength[45]'"/></td>
            </tr>
        </table>
    </form>
    <div id="ft" style="padding:5px;text-align: right;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="submitForm()" style="width:80px">Ok</a> &nbsp;&nbsp;
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="closeWindow()" style="width:80px">Cancel</a>
    </div>
</div>

<div id="sort" class="easyui-window" title="菜单排序" data-options="closed:true,iconCls:'icon-save',footer:'#ft1'" style="width:300px;height:500px;padding:10px;">
    <ul id="tt"></ul>
    <div id="ft1" style="padding:5px;text-align: right;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="sort()" style="width:80px">Ok</a> &nbsp;&nbsp;
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="closeWindow()" style="width:80px">Cancel</a>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        $('#tg').treegrid({
            title:'菜单管理',
            url:'/v1/api0/resource/list',
            idField:'id',
            treeField:'text',
            columns:[[
                {field:'text',title:'菜单名称',width:100},
                {field:'url',title:'菜单地址',width:150},
                {field:'iconCls',title:'菜单图标',width:100},
                {field:'sort',title:'菜单顺序',width:50,}
            ]],
            toolbar: [{
                id: 'btnAdd',
                text: '添加',
                iconCls: 'icon-add',
                handler: function () {
                    add();
                }
            }, '-', {
                id: 'btnEdit',
                text: '修改',
                iconCls: 'icon-edit',
                handler: function () {
                    edit();
                }
            }, '-', {
                id: 'btnDelete',
                text: '删除',
                iconCls: 'icon-remove',
                handler: function () {
                    del();
                }
            }, '-', {
                id: 'btnReload',
                text: '刷新',
                iconCls: 'icon-reload',
                handler: function () {
                    $("#tg").treegrid("reload");
                }
            }, '-', {
                id: 'btnSort',
                text: '排序',
                iconCls: 'icon-sort_ascending',
                handler: function () {
                    showSortWindow();
                }
            }]
        });

        var heightMargin = 10;
        $('#tg').resizeTreeGrid(heightMargin, 0, 0, 0);
        $(window).resize(function() {
            $('#tg').resizeTreeGrid(heightMargin, 0, 0, 0);
        });
    });

    function add() {
        $('#ff').form('clear');
        $("#ff input[name='id']").val("");

        var comboTreeData = [];
        var root = {id : 0, pid : -1, text : '根节点', iconCls : 'icon-application_side_tree'};
        root.children = $('#tg').treegrid('getData');
        comboTreeData.push(root);

        $('#ct').combotree('loadData', comboTreeData);
        $('#ct').combotree('setValue', 0);

        $('#addOrEdit').window({title:'添加菜单'});
        $('#addOrEdit').window('open');
    }

    function edit() {
        $('#ff').form('clear');
        var row = $('#tg').treegrid('getSelected');
        if (!row){
            top.window.showMessage("请选择菜单");
            return;
        }

        $('#ff').form('load',row);
        $("#ff input[name='id']").val(row.id);
        $("#ff input[name='name']").val(row.text);

        var comboTreeData = [];
        var root = {id : 0, pid : -1, text : '根节点', iconCls : 'icon-application_side_tree'};
        root.children = $('#tg').treegrid('getData');
        comboTreeData.push(root);

        $('#ct').combotree('loadData', comboTreeData);
        $('#ct').combotree('setValue', row.pid);

        $('body').data('ff-serialize', $('#ff').serialize());
        $('#addOrEdit').window({title:'编辑菜单'});
        $('#addOrEdit').window('open');
    }

    function submitForm(){
        var id = $("#ff input[name='id']").val();
        var url = id.length ? "/v1/api0/resource/edit" : "/v1/api0/resource/add";
        var data = $('#ff').serialize();
        if(data == $('body').data('ff-serialize')) {
            top.window.showMessage("数据没有改动");
            return;
        }
        $.ajax({
            type: "post",
            url: url,
            data: data,
            datatype: "json",
            beforeSend: function () {
                if (!$('#ff').form('validate')){
                    return false;
                }
                $('#tg').treegrid('loading');
            },
            success: function (data) {
                if(data.code == 200) {
                    $('#tg').treegrid('reload');
                    top.window.showMessage();
                    closeWindow();
                } else {
                    top.window.showMessage(data.msg);
                    $('#tg').treegrid('loaded');
                }
            },
            error: function () {
                $('#tg').treegrid('loaded');
            }
        });
    }

    function closeWindow(){
        $('#addOrEdit').window('close');
        $('#sort').window('close');
    }

    function del() {
        var row = $('#tg').treegrid('getSelected');
        if (!row){
            top.window.showMessage("请选择菜单");
            return;
        }

        top.window.$.messager.confirm('确认', '您确定要删除选择的菜单吗？', function(r){
            if (r){
                var url = "/v1/api0/resource/delete";
                var data = {id: row.id};
                $.ajax(ajaxOption(url, data));
            }
        });
    }

    function showSortWindow() {
        $('#tt').tree({
            url:'/v1/api0/resource/listWithRoot',
            animate:true,
            dnd:true
        });
        $('#sort').window('open');
    }

    function sort() {
        var url = "/v1/api0/resource/sort";
        var data = {treeStr: JSON.stringify($('#tt').tree('getRoot'))};
        $.ajax(ajaxOption(url, data));
    }

    function ajaxOption(url, data) {
        return {
            type: "post",
            url: url,
            data: data,
            datatype: "json",
            beforeSend: function () {
                $('#tg').treegrid('loading');
            },
            success: function (data) {
                if(data.code == 200) {
                    $('#tg').treegrid('reload');
                    top.window.showMessage();
                    closeWindow();
                } else {
                    top.window.showMessage(data.msg);
                    $('#tg').treegrid('loaded');
                }
            },
            error: function () {
                $('#tg').treegrid('loaded');
            }
        }
    }
</script>
</body>
</html>
